<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2022/10/14
  Time: 8:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="app">

<div id="main" style="width: 600px;height:400px;"></div>
</div>

<script type="text/javascript">

    var app=new Vue({
          el:"#app",
          data:{
              categories:[],
              values:[]
          },
          created(){
              //先获取数据赋值给data中相关的参数，再对echarts进行设置
              axios.get("/echarts/demo01").then(resp=>{
                  this.categories=resp.data.data.categories;
                  this.values=resp.data.data.values;
                  this.initEcharst();
              })
          },
          methods:{
              initEcharst(){
                // 基于准备好的dom，初始化echarts实例
                  var myChart = echarts.init(document.getElementById('main'));
                  myChart.setOption({
                      title: {
                          text: '异步数据加载示例'
                      },
                      tooltip: {},
                      legend: {},
                      xAxis: {
                          data: this.categories
                      },
                      yAxis: {},
                      series: [
                          {
                              name: '销量',
                              type: 'bar',
                              data: this.values
                          }
                      ]
                  });
              }
          }
    })

</script>
</body>
</html>
